package com.sevennotes.classtable.ui.pages.components

import androidx.compose.animation.AnimatedVisibility
import androidx.compose.animation.slideIn
import androidx.compose.animation.slideOut
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.gestures.detectTapGestures
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.KeyboardArrowDown
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.pointer.pointerInput
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.IntOffset
import androidx.compose.ui.unit.dp
import com.sevennotes.classtable.config.Config
import com.sevennotes.classtable.config.Settings
import java.lang.Exception

@Composable
fun TimePickerDialog(
  modifier: Modifier = Modifier,
  list: List<List<String>>,
  picked: List<Int>,
  onCancelClick: () -> Unit,
  onConfirmClick: (List<Int>) -> Unit,
) {
  val insidePicked = remember { mutableStateOf(MutableList(picked.size) { picked[it] }) }
  Box(
    modifier = modifier
      .background(color = Color.Gray.copy(alpha = 0.2f))
      .fillMaxSize(),
    contentAlignment = Alignment.BottomCenter
  ) {
    Column(
      modifier = Modifier
        .fillMaxWidth()
    ) {
      Box(modifier = Modifier
        .fillMaxWidth()
        .weight(1f)
        .pointerInput(Unit) {
          detectTapGestures { onCancelClick() }
        }
      )
      Box(modifier = Modifier.background(color = Config.dividerColor)) {
        Column {
          TopBar(
            modifier = Modifier.height(50.dp),
            tittle = "选择时间",
            onCancel = onCancelClick
          ) {
            onConfirmClick(insidePicked.value.toList())
          }
          Spacer(modifier = Modifier.height(80.dp))
          TimePicker(
            modifier = Modifier.background(color = MaterialTheme.colors.background),
            list = list,
            picked = { picked[it] },
            onPick = { l, n -> insidePicked.value[l] = n }
          )
          Spacer(modifier = Modifier.height(80.dp))
        }
      }
    }
  }
}

@Composable
fun TimePicker(
  modifier: Modifier = Modifier,
  list: List<List<String>>,
  picked: (Int) -> Int,
  onPick: (Int, Int) -> Unit
) {
  Row(
    modifier = modifier
      .fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceBetween,
    verticalAlignment = Alignment.CenterVertically
  ) {
    list.forEachIndexed { i, l ->
      SelectorItem(
        modifier = Modifier.weight(1f),
        inside = picked(i),
        strList = l,
        onSelect = { onPick(i, it) }
      )
      Spacer(modifier = Modifier.width(2.dp))
    }
  }
}

@Composable
fun SelectorItem(
  modifier: Modifier = Modifier,
  inside: Int,
  strList: List<String>,
  onSelect: (Int) -> Unit,
) {
  var dropDown by remember { mutableStateOf(false) }
  var selected by remember {
    mutableStateOf(
      try {
        strList[inside]
      } catch (e: Exception) {
        ""
      }
    )
  }
  Box(
    modifier = modifier
      .widthIn(min = 40.dp)
      .border(width = 2.dp, color = MaterialTheme.colors.primary, shape = RoundedCornerShape(5.dp))
      .padding(5.dp)
      .clickable { dropDown = !dropDown },
    contentAlignment = Alignment.Center
  ) {
    Row {
      Text(modifier = Modifier.weight(1f), text = selected, textAlign = TextAlign.Center)
//      Icon(modifier = Modifier.size(5.dp),imageVector = Icons.Filled.KeyboardArrowDown, contentDescription = null)
    }
    DropdownMenu(expanded = dropDown, onDismissRequest = { dropDown = false }) {
      strList.forEachIndexed { index, str ->
        DropdownMenuItem(onClick = {
          selected = str
          onSelect(index)
          dropDown = false
        }) {
          Text(text = str)
        }
      }
    }
  }
}

@Composable
private fun TopBar(
  modifier: Modifier = Modifier,
  tittle: String,
  onCancel: (() -> Unit)? = null,
  onConfirm: () -> Unit
) {
  Row(
    modifier = modifier
      .padding(vertical = 5.dp)
      .fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
  ) {
    OutlinedButton(
      modifier = Modifier
        .weight(1f)
        .wrapContentWidth(Alignment.Start),
      onClick = { if (onCancel != null) onCancel() }
    ) {
      Text(text = "取消")
    }
    Text(text = tittle)
    OutlinedButton(
      modifier = Modifier
        .weight(1f)
        .wrapContentWidth(Alignment.End),
      onClick = { onConfirm() }
    ) {
      Text(text = "确定")
    }
  }
}

//@Preview(showBackground = true)
//@Composable
//fun PrevPicker() {
//  TimePicker(list = Settings.getClassChoiceList(), picked = { "我是小坏蛋" }, onPick = { a, b -> })
//}